<!--<template>
  <el-table :data="filteredStudents" style="width: 100%">
    <el-table-column label="编号" prop="id" width="80" />
    <el-table-column label="姓名" prop="name" width="120" />
    <el-table-column label="性别" prop="gender" width="80" />
    <el-table-column label="年龄" prop="age" width="80" />
    <el-table-column label="手机" prop="cellphone" width="140" />
    <el-table-column label="籍贯" prop="address" width="200" />
    <el-table-column align="right" width="200">
      <template #header>
        <el-input v-model="keyword" size="small" placeholder="搜索学生" clearable />
      </template>
      <template #default="scope">
        <el-button size="small" type="primary" @click="editStudent(scope.row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="deleteStudent(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>-->
<template>
  <el-table :data="filteredStudents" style="width: 100%" :fit="true">
    <el-table-column label="编号" prop="id" width="80" align="center" show-overflow-tooltip />
    <el-table-column label="姓名" prop="name" width="120" align="center" show-overflow-tooltip />
    <el-table-column label="性别" prop="gender" width="80" align="center" show-overflow-tooltip />
    <el-table-column label="年龄" prop="age" width="80" align="center" show-overflow-tooltip />
    <el-table-column label="手机" prop="cellphone" width="140" align="center" show-overflow-tooltip />
    <el-table-column label="籍贯" prop="address" width="200" align="center" show-overflow-tooltip />

    <!-- 右侧操作列 -->
    <el-table-column label="操作" align="center">
      <template #header>
        <el-input
            v-model="keyword"
            size="default"
            placeholder="搜索学生"
            clearable
            style="width: 180px;"
        />
      </template>
      <template #default="scope">
        <el-button size="small" type="primary" @click="editStudent(scope.row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="deleteStudent(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "StudentView",
  data() {
    return {
      students: [],
      keyword: ""
    };
  },
  computed: {
    filteredStudents() {
      return this.students.filter(student =>
          student.name.includes(this.keyword) ||
          student.cellphone.includes(this.keyword)
      );
    }
  },
  methods: {
    loadStudents() {
      this.$axios.get("/findStudents").then(result => {
        if (result.data.code === 200) {
          this.students = result.data.data;
        }
      });
    },
    editStudent(student) {
      console.log("编辑学生", student);
    },
    deleteStudent(id) {
      this.$confirm("确定删除该学生吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios
            .post("/removestudent", { id }) // 发送删除请求到后端
            .then(result => {
              if (result.data.code === 200) {
                this.students = this.students.filter(student => student.id !== id);
                this.$message.success("删除成功");
              } else {
                this.$message.error("删除失败，请稍后重试");
              }
            })
            .catch(() => {
              this.$message.error("请求失败，请检查网络");
            });
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    }

  },
  mounted() {
    this.loadStudents();
  }
};
</script>

<style scoped>
.el-table {
  margin-top: 10px;
  border-radius: 8px;
}
.el-button {
  margin-right: 5px;
}
</style>
